<template>
	<view style="position:absolute;z-index:9999;">		
		<view class="tabBar" :style="ios?'padding-bottom: 40rpx':''">
			<view class="gird-tab" v-for="(item,index) in tabData" :key="index"
			:class="pageIndex==index?'tabOn':''" @click="toTab(item, index)">
				<image class="tabIcon" :src="pageIndex==index?item.icon2:item.icon1" mode="" v-if="item.style==0"></image>
				<view class="tabIcon" v-if="item.style==1">
					<view class="iconBox">
						<image class="tabIcon" :src="pageIndex==index?item.icon2:item.icon1" mode=""></image>
					</view>
				</view>
				<view class="tabText" v-if="textType==1">{{item.name}}</view>
				<view class="tabDrop" v-if="textType==2" :class="pageIndex==index?'dropOn':''"></view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		props: {
			pageIndex: {
				type: Number,
				default: 0
			},
			textType: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				ios: false,
				tabData: [{
					pageUrl: '/pages/index/index',
					name: '首页',
					icon1: '../../static/nabar1.png',   //默认图标
					icon2: '../../static/nabar1-a2.png',   //选中图标
					style: 0
				},{
					pageUrl: '/pages/search/search',
					name: '搜索',
					icon1: '../../static/search.png',   //默认图标
					icon2: '../../static/search.png',   //选中图标
					style: 1
				},{
					pageUrl: '/pages/me/me',
					name: '我的',
					icon1: '../../static/me.png',   //默认图标
					icon2: '../../static/me_selected.png',   //选中图标
					style: 0
				}]
			}
		},
		created() {
			const self = this;
			uni.getSystemInfo({
				success: function (res) {
					if(res.osName=='ios'){
						self.ios = true;
					}
				}
			});
		},
		methods: {			
			toTab(item, index){
				if(this.pageIndex!=index){
					this.$emit('toTab', item);
				}
			}
			
		}
	}
</script>

<style lang="scss">
.tabBar{
	width: 100%;
	display: flex;
	position: fixed;
	padding: 20rpx 0;
	bottom: 0;
	box-shadow: 0rpx 0rpx 20rpx #e2e2e2;
	background-color: rgba(255, 255, 255);
	
	.gird-tab{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;

		
		.tabText{
			font-size: 24rpx;
			padding-top: 10rpx;
			color: #707070;
		}
		
		.tabIcon{
			width: 50rpx;
			height: 50rpx;
			position: relative;
		}
		
		.tabDrop{
			width: 8rpx;
			height: 8rpx;
			background-color: #dddddd;
			border-radius: 50%;
			margin-top: 10rpx;
		}
		
		.dropOn{
			background-color: #00c5ff;
		}
		
		.iconBox{
			width: 100rpx;
			height: 70rpx;
			background-color: #00c5ff;
			position: absolute;
			bottom: 0;
			left: calc(50% - 10rpx);
			margin-left: -50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 45rpx;
			border: 10rpx solid #fff;
			box-shadow: 0rpx -10rpx 20rpx #e2e2e2;
		}
	}
	
	.tabBadge{
		position: absolute;
		left: 55%;
		top: -20rpx;
	}
}

.tabOn .tabText{
	color: #00c5ff;
}
</style>
